<script setup>
import ContainerSplitOrFull from '@/components/commonUI/ContainerSplitOrFull.vue'
import { useFollowUserPostListQuery } from '@/composables/usePostDataQuery'
import FilterBar from '../components/FilterBar/FilterBar.vue'
import PostList from '../components/PostList.vue'

const filter = ref(0)

const handleFilterChange = (filter) => {
  filter.value = filter
}

const { data, fetchNextPage, hasNextPage, isFetching, isError } = useFollowUserPostListQuery()

const flattenedData = computed(() => {
  return data.value?.pages.flatMap((page) => page?.result?.data ?? []) || []
})

const loadMore = () => {
  if (hasNextPage.value) {
    fetchNextPage()
  }
}
</script>

<template>
  <ContainerSplitOrFull>
    <div
      class="p-3 flex flex-col gap-2"
      v-infinite-scroll="loadMore"
      :infinite-scroll-disabled="isFetching || !hasNextPage"
      :infinite-scroll-distance="5">
      <FilterBar
        :filter="filter"
        @change="handleFilterChange"
        :checked-title="['最新', '活跃']"
        :menu-options="['发帖日期', '最近活跃']"
        title="排序" />

      <LfEmpty v-if="flattenedData.length === 0" emptyText="您没有关注的用户，请先关注" />
      <PostList :posts-data="flattenedData" />
    </div>
  </ContainerSplitOrFull>
</template>
